<template>
  <div>
    <el-drawer v-model="drawer" title="文件列表" :with-header="true" size="70%">
      <el-form :inline="true" ref="searchForm" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="文件标题：">
          <el-input v-model="searchFrom.title" placeholder="请输入文件标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData()">
            <el-icon><Search /></el-icon>
            &nbsp; 查找
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="refreshSearch()">
            <el-icon><RefreshLeft /></el-icon>
            &nbsp; 重置
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openUploadFile">
            <el-icon><Upload /></el-icon>
            &nbsp;文件上传
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="showTableList" stripestyle="width: 100%" v-loading="loadTab">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="type" label="类型" width="120px" />
        <el-table-column prop="createName" label="上传人" width="120px" />
        <el-table-column prop="isReview" label="是否审核" width="100px" />
        <el-table-column prop="createTime" label="上传时间" width="130px" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column fixed="right" label="操作" width="170">
          <template #default="scope">
            <el-button
              v-if="
                (scope.row.fileType.toLowerCase() === 'jpg' ||
                  scope.row.fileType.toLowerCase() === 'png' ||
                  scope.row.fileType.toLowerCase() === 'pdf') &&
                scope.row.isPermission
              "
              link
              type="primary"
              size="large"
              @click="viewPdf(scope.row)"
            >
              预览
            </el-button>
            <el-button
              link
              type="primary"
              size="large"
              v-if="scope.row.isPermission"
              @click="download(scope.row)"
            >
              下载
            </el-button>
            <el-button
              link
              type="primary"
              size="large"
              v-if="scope.row.isPermission && scope.row.isReview !== '通过'"
              @click="del(scope.row)"
            >
              删除
            </el-button>
            <span
              v-if="
                !scope.row.isPermission &&
                (scope.row.processing === '审核中' || scope.row.processing === '未通过')
              "
            >
              {{ scope.row.processing }}
            </span>
            <el-button
              link
              type="primary"
              size="large"
              v-if="!scope.row.isPermission && scope.row.processing !== '审核中'"
              @click="applyAccess(scope.row)"
            >
              权限申请
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-pagination
          v-model:currentPage="formInline.pageNum"
          :page-size="formInline.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </el-drawer>
    <UploadFileDrawer ref="uploadFileDrawer" @refresh="refresh" />
    <ViewFileDrawer ref="fileViewDrawer" />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import UploadFileDrawer from './uploadFileDrawer.vue'
  import ViewFileDrawer from '@/components/fileViewDrawer/index.vue'
  import { ElMessage } from 'element-plus'
  import {
    deleteFileDetailById,
    getFileDetailById,
    postFileDetailFile,
  } from '@/api/controller/file-detail-controller/index'
  import { postFileApplication } from '@/api/controller/file-application-controller/index'
  const drawer = ref(false)
  const fileList = ref([])
  const proNumber = ref()
  const listIndex = ref()
  const filestage = ref()
  const show = (data, index, projectNumber, stage) => {
    listIndex.value = index
    fileList.value = data.fileList
    filestage.value = stage
    proNumber.value = projectNumber
    formInline.title = stage
    formInline.projectNumber = projectNumber
    formInline.pageSize = 10
    formInline.pageNum = 1
    drawer.value = true
    loadData()
  }
  //文件上传抽屉
  const uploadFileDrawer = ref()
  const openUploadFile = () => {
    uploadFileDrawer.value.show(proNumber.value, filestage.value)
  }

  //文件预览抽屉
  const fileViewDrawer = ref()
  const viewPdf = async (data) => {
    let res = await getFileDetailById({ id: data.id })
    fileViewDrawer.value.show(res.data)
  }

  //文件下载
  const download = async (row) => {
    let res = await getFileDetailById({ id: row.id })
    window.open(res.data.filePath)
  }

  //文件删除
  const del = async (row) => {
    const delData = { id: row.id }
    let res = await deleteFileDetailById(delData, { loading: true })
    if (res.code === 200) {
      ElMessage.success('删除成功')
      refresh()
    }
  }

  const searchFrom = ref({
    title: '',
  })
  //重置搜索
  const refreshSearch = () => {
    searchFrom.value.title = ''
    loadData()
  }

  //加载数据
  const showTableList = ref([])
  const total = ref(0)
  const loadTab = ref(true)
  const loadData = async () => {
    try {
      loadTab.value = true
      let res = await postFileDetailFile(formInline)
      fileList.value = res.data.list
      total.value = res.data.total
      if (searchFrom.value.title === '') {
        showTableList.value = fileList.value
      } else {
        showTableList.value = fileList.value.filter((item) =>
          item.title.includes(searchFrom.value.title),
        )
      }
    } finally {
      loadTab.value = false
    }
  }

  //刷新
  const refresh = async () => {
    await emit('getData')
    formInline.pageSize = 10
    formInline.pageNum = 1
    loadData()
  }

  //分页
  const formInline = reactive({
    title: '',
    projectNumber: '',
    pageSize: 10,
    pageNum: 1,
  })
  const handleSizeChange = (val) => {
    formInline.pageSize = val
    formInline.pageNum = 1
    loadData()
  }
  const handleCurrentChange = () => {
    loadData()
  }

  const applyAccess = async (row) => {
    let res = await postFileApplication({ fileId: row.id }, { loading: true })
    if (res.code === 200) {
      ElMessage.success('申请成功')
      loadData()
    }
  }
  const emit = defineEmits(['getData'])
  defineExpose({
    show,
  })
</script>
